import React, { useState } from 'react'
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UploadOutlined,
  HomeOutlined,
  SettingFilled,
} from '@ant-design/icons'
import { Layout, Menu, Button, theme, Popconfirm } from 'antd'
import './Layout.scss'
import { useNavigate, Outlet, useLocation } from 'react-router-dom'
import { observer } from 'mobx-react-lite'
import { useEffect } from 'react'
import { useStore } from '@/store'
const { Header, Sider, Content } = Layout
const App = () => {
  const [collapsed, setCollapsed] = useState(false)
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken()
  const navigate = useNavigate()
  const { userStore, loginStore, channelStore } = useStore()

  // 退出登录
  const confirm = () => {
    loginStore.loginOut()
    navigate('/login', { replace: true })
  }
  const { pathname } = useLocation()

  // 获取用户信息
  useEffect(() => {
    userStore.getUserInfo()
    channelStore.getChannelList()
  }, [userStore, channelStore])
  return (
    <Layout>
      <Sider trigger={null} collapsible collapsed={collapsed}>
        <Menu
          theme="dark"
          mode="inline"
          defaultSelectedKeys={[pathname]}
          onClick={({ key }) => navigate(key)}
          items={[
            {
              key: '/',
              icon: <HomeOutlined />,
              label: '数据预览',
            },
            {
              key: '/article',
              icon: <SettingFilled />,
              label: '文章管理',
            },
            {
              key: '/publish',
              icon: <UploadOutlined />,
              label: '发布文章',
            },
          ]}
        />
      </Sider>
      <Layout>
        <Header style={{ padding: 0, background: colorBgContainer }}>
          <div className="header">
            <Button
              type="text"
              icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
              onClick={() => setCollapsed(!collapsed)}
              style={{
                fontSize: '16px',
                width: 64,
                height: 64,
              }}
            />
            <div className="title">欢迎光临</div>
            <div className="user">
              <div className="username">{userStore.userInfo.name}</div>
              <Popconfirm
                title="温馨提示"
                description="是否确定退出登录?"
                okText="是"
                onConfirm={confirm}
                cancelText="否">
                <Button>退出登录</Button>
              </Popconfirm>
            </div>
          </div>
        </Header>
        <Content
          style={{
            margin: '24px 16px',
            height: '100%',
            background: colorBgContainer,
            borderRadius: borderRadiusLG,
          }}>
          <Outlet />
        </Content>
      </Layout>
    </Layout>
  )
}

export default observer(App)
